<template>
  <div class="fillcontain">
    <Header/>

    <section class="data_section">
      <header class="section_title">数据统计</header>
      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="4">
          <div class="data_list today_head"><span class="data_num head">当日数据：</span></div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{articleCount}}</span> 新增文章</div>
        </el-col>
      </el-row>

      <tendency :sevenDate='sevenData' :sevenDay='sevenDay'></tendency>


    </section>
  </div>
</template>

<script>
  import Header from '../components/Header'
  import tendency from '../components/tendency'
  import Footer from '../components/Footer'
  import {sevenDayCount, todayArticleCount} from '../api/getData'

  export default {
    name: "Index",
    components: {Header, Footer, tendency},
    data() {
      return {
        articleCount: 20,
        allArticleCount: 200,
        sevenDay: [],
        sevenData: [],

      }

    },
    mounted() {
      this.getSevenDayCount()
      this.init();
      console.log(this.$store.state.adminInfo)
      console.log(this.$store.state.token)
    },
    methods: {
      async init (){
        const res = await todayArticleCount();
        this.articleCount = res.data.data;
      },
      async getSevenDayCount() {
        const res = await sevenDayCount()
        for (var i = 1; i <= 7; i++) {
          this.sevenDay.push(res.data.data['day' + i].date);
          this.sevenData.push(res.data.data['day' + i].count);
        }
      },
      remoteMethod(query) {
        if (query !== '') {
          console.log(query)
          this.loading = true;
        } else {
          this.options = [];
        }
      },
    }
  }
</script>

<style scoped lang="less">
  div {
    color: #000;
  }

  @import '../style/mixin';
  .data_section {
    padding: 20px;
    margin-bottom: 40px;

    .section_title {
      text-align: center;
      font-size: 30px;
      margin-bottom: 10px;
    }

    .data_list {
      text-align: center;
      font-size: 14px;
      color: #666;
      border-radius: 6px;
      background: #E5E9F2;

      .data_num {
        color: #333;
        font-size: 26px;

      }

      .head {
        border-radius: 6px;
        font-size: 22px;
        padding: 4px 0;
        color: #fff;
        display: inline-block;
      }
    }

    .today_head {
      background: #FF9800;
    }

    .all_head {
      background: #20A0FF;
    }
  }

  .wan {
    .sc(16px, #333)
  }
</style>
